<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初识 Vue</title>
    <!-- JS 全局将多出一个 Vue -->
    <script src="../js/vue.js"></script>
</head>
<body>
<!--
    1. <div id="root"> 是一个容器，容器中写的不是原始 html 代码，而是 Vue 的模板代码（好像 JSP）
    2. 所谓的模板代码，类似于 React 中的 jsx(js 和 html 混着来)，是 html + js 的混合体
    3. {{xxx}} xxx 会自动读取 data 中的 xxx 属性，只要能读出来，剩下的属性和方法都可以调用
-->
<!-- 准备好一个容器 -->
<div class="root">
    <h1>hello,{{school.name.toUpperCase()}}</h1>
    <h2>学校坐落在{{school.address}}</h2>
    <h2>我学的是{{school.subject}}学科</h2>
    调用而不是打印函数
    <h2>我学的是{{school.subject()}}学科</h2>
    <hr>
    <!-- 不标准表达式 -->
    <!-- 取第一个 参考 2_表达式.html -->
    <h1>1. {{school.name, school.address}}</h1>
    <!-- 取末尾 -->
    <h1>2. {{(school.name, school.address)}}</h1>
    <!-- 短路与：第一个为 true 取第二个，第一个为 false 什么都不展示 -->
    <h1>3. {{school.ok && school.address}}</h1>
    <!-- 短路或：第一个为 true 取第一个，第一个为 false 取第二个 -->
    <h1>4. {{school.ok || school.address}}</h1>
    <!-- 三目运算符 -->
    <h1>5. {{school.name ? 1 : 2}}</h1>
</div>
第二个容器不好使
<div class="root">
    <h1>hello,{{school.name}}</h1>
</div>

<script>
    // 创建一个 Vue 实例对象，并传入一个配置对象
    new Vue({
        // el 是 element 的缩写(元素 节点)
        el: '.root', // el 用于指定当前 Vue 实例为哪个容器服务，值是选择器字符串(ID 或 class 都行)，选择器的写法类似于 jQuery
        data: { // data 是存储数据的地方，为 root 容器提供数据，值为一个对象，相当于 React 中的 state
            // school: "尚硅谷"
            school: {
                name: 'atguigu',
                address: '宏福科技园综合楼',
                subject: ()=> '前端'
            }
        }
    })
</script>
</body>
</html>
